<template>
  <div class="index">
    <el-container>
      <el-header>
        <p>电商后台</p>
        <h2>电商后台管理系统</h2>
        <!-- <a href="###" @click="logOut">退出</a> -->
        <el-dropdown>
          <i style="margin-right: 15px">
            <img src="../img/4.jpg" alt="">
          </i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
          </el-dropdown-menu>
          <span>{{$store.state.username}}</span>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :router="true" :default-active="defaultActive" unique-opened>
            <el-submenu :index="''+item.id" v-for="item in menus" :key="item.id">
              <template slot="title">
                <i v-if="item.path=='users'" class="el-icon-user"></i>
                <i v-if="item.path=='rights'" class="el-icon-menu"></i>
                <i v-if="item.path=='goods'" class="el-icon-goods"></i>
                <i v-if="item.path=='orders'" class="el-icon-s-order"></i>
                <i v-if="item.path=='reports'" class="el-icon-s-promotion"></i>
                {{item.authName}}
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="it in item.children" :key="it.id" :index="'/index/'+it.path">
                  {{it.authName}}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getMenus } from '../http/api'
import { mapMutations } from 'vuex'
export default {
  data(){
    let path = this.$route.path;
    let arr = path.split('/');
    if (arr.length>3) {
      arr.splice(arr.length-1,1);
    }
    let str = arr.join('/');
    console.log(path,str)
    return {
      defaultActive: str,
      menus: [],
    }
  },
  methods:{
    ...mapMutations(['resetState']),
    getMenus() { // 获取左侧菜单权限列表
      return getMenus().then(res=>{
        this.menus=res.data;
        // console.log(res);
      })
    },
    logOut(){ // 退出
      localStorage.clear();
      this.resetState();
      this.$router.push({name: 'login'}); //退出后回到登录页面
    }
  },
  created(){
    this.getMenus();
  },
  watch:{ //监听路由刷新后不掉
    '$route'(){
      let path = this.$route.path;
      let arr = path.split('/');
      if (arr.length>3) {
        arr.splice(arr.length-1,1);
      }
      let str = arr.join('/');
      this.defaultActive = str;
    }
  }
};
</script>
<style lang="scss">
.index {
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 40px;
      color: #000;
      margin-left: 20px;
    }
    h2 {
      color: #ffffff;
    }
    a {
      margin-right: 5px;
    }
  }
  .el-aside {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #e9eef3;
    color: #333;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(2){
    min-height: calc(100vh - 60px);
  }
  .el-menu-item-group__title{
    padding: 0;
  }
  .el-submenu__title{
    display: flex;
    align-items: center;
  }
  .el-dropdown {
    display: flex;
    align-items: center;
    img{
      width: 25px;
      height: 25px;
      display: block;
      border-radius: 50%;
    }
  }
}
.el-table th{
  font-weight: bold;
}
.users {
  .el-dialog--center .el-dialog__body{
    text-align: center;
  }
}

</style>
